<template>
  <div class="edit-role-box">
    <div class="role-box current-role">
      <div class="title">当前角色</div>
      <el-radio-group v-model="formData.currentRole">
        <el-radio
          v-for="(role, index) in roleList"
          :key="index"
          :label="role.roleId"
        >
          {{ role.roleName }}
        </el-radio>
      </el-radio-group>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'EditRole',
  props: {
    // 弹窗数据
    popData: {
      type: Object,
      default: () => ({})
    },
    // 弹窗配置
    popConfig: {
      type: Object,
      default: () => ({})
    },
    // 弹窗取消
    close: {
      type: Boolean,
      default: false
    },
    // 弹窗确认
    confirm: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formData: {
        currentRole: '',
        defaultRole: ''
      }
    }
  },
  computed: {
    ...mapGetters(['roleList', 'roleId'])
  },
  watch: {
    confirm() {
      if (this.roleId === this.formData.currentRole) {
        this.$message.warning('你已选择当前角色')
        return
      }
      const params = {
        roleId: this.formData.currentRole
      }
      this.submit(params)
    }
  },
  mounted() {
    this.$set(this.formData, 'currentRole', this.roleId)
  },
  methods: {
    /**
     * 提交
     */
    async submit(params) {
      const res = await this.$api.changeRole(params)
      if (Number(res.code) === 1000) {
        this.$message.success('角色切换成功!')
        this.$emit('initMenu')
      } else if (res.msg) {
        this.$message({ type: 'error', message: res.msg })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.edit-role-box {
  color: #333;
  padding: 0 20px;
  display: flex;
  border: 1px solid #e7e7e7;

  .role-box {
    // width: 50%;
    padding: 16px;

    .title {
      font-weight: 500;
      padding-bottom: 10px;
    }
  }

  // .current-role {
  //   border-right: 1px solid #E7E7E7;
  // }

  .el-radio {
    display: block;
    padding: 5px 0;
  }
}
</style>
